<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直对齐属性</title>
		<style>
			p img{
				width: 100px;
				height: 100px;
			}
			/* 垂直对齐属性 vertical-align属性【4种效果】 */
			p img.baseline{
				vertical-align: baseline;
				/* 默认情况：底边对齐 */
			}
			p img.top{
				vertical-align: top;
			}
			p img.middle{
				vertical-align: middle;
			}
			p img.bottom{
				vertical-align: bottom;
			}
			
		</style>
	</head>
	<body>
		<!-- 表格常用属性【也可以用于行内元素】  功能：文本与图片对齐方式【4种】
		 vertical-align属性
		 -->
		 <p>
			 基线对齐 <img src="../Day03/img/1.png" alt="太乙" class="baseline">
		 </p>
		 <p>
			 顶部对齐 <img src="../Day03/img/2.png" alt="哪吒1" class="top">
		 <p>
			 中间对齐 <img src="../Day03/img/3.png" alt="哪吒2" class="middle">
		 </p>
		 <p>
			 底部对齐 <img src="../Day03/img/4.png" alt="申公豹" class="bottom">
		 </p>
	</body>
</html>